<template>
  <div>
    <div class="link-back" @click="closePage">&lt; 售后管理</div>
    <div class="layout-item">
      <div class="tit">
        <h3 class="txt">售后详情</h3>
      </div>
      <div class="body">
        <div class="data-list">
          <span class="item"><b>售后类型</b><strong>{{ aftermarketType }}</strong></span>
          <span class="item"><b>售后单号</b><strong>{{ details && details.aftermarketorderid }}</strong></span>
          <span class="item"><b>发起时间</b><strong>{{ details && details.addtime }}</strong></span>
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="body">
        <div class="pord-wrapper">
          <table class="table-style" style="width: 100%">
            <thead>
              <tr>
                <th>商品信息</th>
                <!--<th>总金额（元）</th>
                <th>优惠金额（元）</th>
                <th>运费（元）</th>
                <th>订单总金额（元）</th>-->
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="prop w100">
                    <img class="img" :src="details && details.img" alt="商品">
                    <div class="name">
                      <strong>{{ details && details.title }}</strong>
                      <!-- 暂时先不要 -->
                      <span>{{ details && details.specs }}</span>
                      <!-- 暂时先不要 -->
                    </div>
                  </div>
                </td>
                <!--<td>{{ details && details.money }}</td>
                <td>{{ details && details.discount }}</td>
                <td>{{ details && details.fare }}</td>
                <td>{{ details && details.paymoney }}</td>-->
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="layout-item">
      <div class="body">
        <div class="pord-wrapper">
          <table class="table-style" style="width: 100%">
            <thead>
              <tr>
                <th>订单截图</th>
                <!--<th>总金额（元）</th>
                <th>优惠金额（元）</th>
                <th>运费（元）</th>
                <th>订单总金额（元）</th>-->
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="prop w100">
                    <!-- <div class="zoom-Item">
                      <img class="img" :src="details && details.orderimg" alt="订单截图">
                      <i class="el-icon-zoom-in"></i>
                    </div> -->
                    <el-image
                      style="width: 100px; height: 100px;margin-right:10px"
                      :src="details && details.orderimg"
                      :preview-src-list="details && [details.orderimg]"
                    />
                    <div class="name">
                      <strong>购买渠道:{{ details && details.orderchannel }}</strong>
                      <!-- 暂时先不要 -->
                      <span>订单编号:{{ details && details.orderid }}</span>
                      <!-- 暂时先不要 -->
                    </div>
                  </div>
                </td>
                <!--<td>{{ details && details.money }}</td>
                <td>{{ details && details.discount }}</td>
                <td>{{ details && details.fare }}</td>
                <td>{{ details && details.paymoney }}</td>-->
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div v-if="tableDataNew.length != 0" class="layout-item">
      <div class="body">
        <div class="pord-wrapper" style="padding-bottom:20px">
          <p class="subtxt">重复订单</p>
          <el-table
            :data="tableDataNew"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="aftermarketorderid"
              label="售后单号"
            >
              <template slot-scope="scope">
                <router-link target="_blank" :to="{path:'/aftermarket/aftermarket',query:{'aftermarketorderid':scope.row.aftermarketorderid}}"> {{ scope.row.aftermarketorderid }} </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="informationtitle"
              label="关联商品"
            />
            <el-table-column
              prop="username"
              label="关联用户"
            />
            <el-table-column
              prop="type"
              label="售后类型"
            >
              <template slot-scope="scope">
                {{
                  scope.row.type==0?'无':
                  scope.row.type==1?'需寄回':
                  scope.row.type==2?'无需寄回':其他
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="售后状态"
            >
              <template slot-scope="scope">
                {{
                  scope.row.status==1?'待审核':
                  scope.row.status==2?'审核已通过':
                  scope.row.status==3?'审核未通过':
                  scope.row.status==4?'售后完成':
                  scope.row.status==5?'售后已取消':
                  scope.row.status==6?'资料待填写':
                  scope.row.status==7?'待售后完成':其他
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="addtime"
              label="创建时间"
            />
          </el-table>
        </div>
      </div>
    </div>
    <div class="layout-item hitory">
      <!-- <div class="tit">
        <span class="subtxt">当前状态：</span>
        <el-select v-model="status" placeholder="售后状态" style="width: 120px" @change="changeStatus">
          <el-option
            v-for="item in statusOptions.slice(1)"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div> -->
      <div class="body">
        <p class="subtxt">售后历史</p>
        <div class="data-list">
          <ul v-if="details" class="txt-block">
            <li v-for="item in details.detail" :key="item.id">
              <p>{{ `${item.addtime}，${detailType[+item.type - 1]}  ${item.type=='11'?item.desc:''}  ，提交人${['1', '2', '3', '4'].includes(item.type)?item.username:item.opusername}` }}</p>
              <!-- 新增描述 START -->
              <template v-if="item.type === '1'">
                <p class="txt-gray">{{ item.desc }}</p>
                <p class="img-list">
                  <!-- <img v-for="img in item.img" :key="img" :src="img" alt="图片"> -->
                  <el-image
                    v-for="img in item.img"
                    :key="img"
                    style="width: 100px; height: 100px"
                    :src="img"
                    alt="图片"
                    :preview-src-list="[img]"
                  />
                </p>
              </template>
              <!-- 新增描述 END -->
              <!-- 收发信息详情 START -->
              <template v-if="item.type === '2'">
                <p class="txt-gray">
                    {{ `${item.userscomname}，${item.usersfareorder} ` }}
                    <el-popover
                    v-if="item.usersfareorder && item.userscomcode"
                    v-model="item.showPopover"
                    title="物流信息"
                    placement="right"
                    width="400"
                    trigger="manual"
                    >
                    <div class="pop-content">
                        <p v-for="delivery in deliveryList" :key="delivery.context">{{ delivery.time + ',' + delivery.context }}</p>
                        <p v-if="!deliveryList[0]">暂无相关物流信息</p>
                        <i class="el-icon-close pop-close" title="关闭" @click="$set(item, 'showPopover', false)" />
                    </div>
                    <a slot="reference" href="javascript:;" @click.prevent="getKuaidiInfo(item)">查看物流信息</a>
                    </el-popover>
                </p>
                
              </template>
              <!-- 收发信息详情 END -->
              <!-- 审核结果未通过理由 START -->
              <p v-if="item.type === '5'" class="txt-gray">{{ item.status==='1'?'审核结果：通过':`审核结果：未通过，理由：${item.examine.reasontype===3?item.examine.reason:reasonTxt[item.examine.reasontype-1]||''}` }}</p>
              <!-- 审核结果未通过理由 END -->
              <!-- 客服提交售后物流 START -->
              <p v-if="item && item.type === '6'" class="txt-gray">
                {{ `${item.kefucomname}，${item.kefufareorder} ` }}
                <el-popover
                  v-if="item.kefufareorder && item.kefucomcode"
                  v-model="item.showPopover"
                  title="物流信息"
                  placement="right"
                  width="400"
                  trigger="manual"
                >
                  <div class="pop-content">
                    <p v-for="delivery in deliveryList" :key="delivery.context">{{ delivery.time + ',' + delivery.context }}</p>
                    <p v-if="!deliveryList[0]">暂无相关物流信息</p>
                    <i class="el-icon-close pop-close" title="关闭" @click="$set(item, 'showPopover', false)" />
                  </div>
                  <a slot="reference" href="javascript:;" @click.prevent="getKuaidiInfo(item)">查看物流信息</a>
                </el-popover>
              </p>
              <!-- 客服提交售后物流 END -->
            </li>
          </ul>
          <!-- 售后反馈 start 新增于20211022-->
          <template>
            <div class="aftermarket-feedback">
              <p class="subtxt">售后反馈</p>
              <p class="textarea-item">
                <el-input v-model="desc" type="textarea" rows="10" maxlength="500" show-word-limit />
              </p>
              <el-button type="primary" @click="aftermarketFeedbackSubmit">提交</el-button>
            </div>
          </template>
          <!-- // 售后反馈 end -->
          <p class="subtxt">售后审核</p>
          <el-button type="primary" @click="dialogCheckVisible=true">审核</el-button>
	        <el-popover type="primary" v-model="sureFareVisible">
	        <p>确定需寄回吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="sureFareVisible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="handleSureFare">确定</el-button>
            </div>
	  <el-button type="primary" slot="reference">需寄回</el-button>
	  </el-popover>

	  <el-popover type="primary" v-model="surenoFareVisible">
	    <p>确定无需寄回吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="surenoFareVisible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="handleSurenoFare">确定</el-button>
            </div>
	  <el-button type="primary" slot="reference">无需寄回</el-button>
	  </el-popover>

          <el-button type="primary" @click="dialogCommitVisible=true">提交售后物流</el-button>
          <el-popover
            v-model="cancelVisible"
            placement="top"
            width="180"
          >
            <p>确定取消售后申请吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="cancelVisible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="handleCancel">确定</el-button>
            </div>
            <el-button slot="reference">取消售后申请</el-button>
          </el-popover>
          <!--<el-button v-if="details && details.type==='3' && status===2" @click="dialogRefoundVisible=true">修改退款金额</el-button>-->
          <el-popover
            v-model="completeVisible"
            placement="top"
            width="180"
          >
            <p>确定提交售后完成吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="completeVisible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="handleComplete">确定</el-button>
            </div>
            <el-button slot="reference">售后完成</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="layout-item">
      <div class="inline-item">
        <div class="tit">
          <h3 class="txt">收货地址</h3>
        </div>
        <div class="body">
          <div class="inline-list">
            <span class="item"><b>收货人姓名</b><strong>{{ details && details.takeinfo.usersname }}</strong></span>
            <span class="item"><b>手机号码</b><strong>{{ details && details.takeinfo.usersmobile }}</strong></span>
            <span class="item"><b>详细地址</b><strong>{{ details && details.takeinfo.usersaddres }}</strong></span>
          </div>
        </div>
      </div>
      <div class="inline-item">
        <div class="tit">
          <h3 class="txt">物流信息</h3>
        </div>
        <div class="body">
          <div class="inline-list" v-if="details && details.logistics">
            <span class="item"><b>配送方式</b><strong>{{ details.logistics.kefucomname }}</strong></span>
            <span class="item"><b>配送单号</b><strong>{{ details.logistics.kefufareorder }}</strong></span>
            <span class="item"><b>发货日期</b><strong>{{ details.logistics.kefuaddtime }}</strong></span>
            <span class="item"><b>收货日期</b><strong>{{ details.logistics.kefuoverime }}</strong></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 客服审核 START -->
    <check-dialog :visible.sync="dialogCheckVisible" :aftermarketid="aftermarketid" @getData="getData" />
    <!-- 客服需寄回 START -->
    <check-dialog :visible.sync="dialogFareVisible" :aftermarketid="aftermarketid" @getData="getData" />
    <!-- 客服审核 END -->
    <!-- 提交售后物流 START -->
    <commit-dialog :visible.sync="dialogCommitVisible" :aftermarketid="aftermarketid" @getData="getData" />
    <!-- 提交售后物流 END -->
    <!-- 修改退款金额 START -->
    <!--<refund-dialog :visible.sync="dialogRefoundVisible" :aftermarketid="aftermarketid" :details="details" @getData="getData" />-->
    <!-- 修改退款金额 END -->
  </div>
</template>
<script src="./edit.js"></script>
<style lang="scss" scoped src="./edit.scss"></style>
